h5 {
    font-weight: bold
}

.dashboard-header > div {
    background: #fff
}

.productoverview-content > div {
    background-color: #F5F6FA;
    height: 60px;
    border: 1px solid #fff
}

    .productoverview-content > div span {
        color: #aaa;
        font-size: 0.8rem;
        top: -12px;
    }


.saleoverview .dashboard-content .dashboard-content-top {
    height: 60px;
}

    .saleoverview .dashboard-content .dashboard-content-top > div {
        display: flex;
        align-items: center;
        justify-content:flex-end
    }
    .saleoverview .dashboard-content .dashboard-content-top > div.col-4 {
        display: flex;
        align-items: center;
        justify-content:flex-start
    }

    .saleoverview .dashboard-content .dashboard-content-top .number {
        font-size: 1.6rem;
        font-weight: 600;
        color: #333
    }

.saleoverview .dashboard-content .dashboard-content-bottom .title {
    font-size: 0.8rem;
    background: #fff;
    color: #999
}

.saleoverview .dashboard-content .dashboard-content-bottom > div {
    display: flex;
    align-items: center;
    width: 100%;
}
/*
.saleoverview .dashboard-content .dashboard-content-bottom .sale-overview-elem {
    display: flex;
    align-items: center;
    width: 100%;
}*/

    .saleoverview .dashboard-content .dashboard-content-bottom .sale-overview-elem .sale-overview-span{
        text-align: center;
        background-color: #f4f6f9;
        border-radius: 5px;
        width: 100%;
    }

.saleoverview .dashboard-content .dashboard-content-bottom .sale-overview-elem .sale-overview-span i {
    top: 25%;
    left: 20px;
}

.visible-icon {
    color: #aaa;
    font-size: 1.1rem
}

.toman {
    font-size: 1rem;
    color: #ccc;
    width: 50px;
}
/*---useroverview-----*/
.useroverview-content {
    width: 300px;
    margin-top: -15px
}

.useroverview-content-row {
    width: 100%;
    background-color: #f4f6f9;
    padding: 7px;
    height: 47px;
    border-radius: 5px
}

    .useroverview-content-row:first-child {
        margin-bottom: 9px;
    }

    .useroverview-content-row > div {
        width: 100%;
        position: relative;
        text-align: center;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .useroverview-content-row > div:first-child {
            border-left: 1px solid #999
        }

        .useroverview-content-row > div .title {
            color: #aaa;
            font-size: 0.75rem;
            top: -18px;
            left: 0;
            right: auto
        }
        .useroverview-content-row.bottom > div .title {
            color: #aaa;
            font-size: 0.75rem;
            bottom: -16px;
            top:auto;
            left: 0;
            right: auto
        }

        .useroverview-content-row > div:first-child .title {
            left: auto;
            right: 0
        }

/*card widget*/
.widget-card {
    width: 100%;
    display: flex;
    justify-content: space-between;
    aspect-ratio: 3/4;
    background: red;
    border-radius: 10px;
    position: relative;
    overflow: hidden
}

    .widget-card.stock-status {
        background: rgb(100,207,232);
        background: linear-gradient(-10deg, rgba(100,207,232,1) 0%, rgba(34,146,180,1) 100%);
    }

    .widget-card.unknow-status {
        background: rgb(142,165,217);
        background: linear-gradient(-10deg, rgba(142,165,217,1) 0%, rgba(181,148,216,1) 100%);
    }

    .widget-card.offer-status {
        background: rgb(244,151,131);
        background: linear-gradient(-10deg, rgba(244,151,131,1) 0%, rgba(236,114,101,1) 100%);
    }

    .widget-card > div.header {
        width: 20%;
        height: 100%;
        /*    position: absolute;
       top: 0;
       right: 0;*/
        background: #ffffff33
    }

        .widget-card > div.header h4 {
            font-size: 1.3rem;
            color: #fff;
            font-weight: bold;
            writing-mode: vertical-lr;
            transform: rotate(-180deg);
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 20px !important;
            cursor: default
        }

    .widget-card .widget-content {
        width: 80%;
        height: 100%;
        padding: 14px 0 25px 0;
        /*display:flex;
        justify-content:space-evenly;
        align-items:center;
        flex-direction:column*/
    }

        .widget-card .widget-content > div {
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #fff
        }

            .widget-card .widget-content > div h5 {
                font-weight: normal;
                font-size: 0.9rem;
            }

            .widget-card .widget-content > div span {
                font-weight: bold;
                font-size: 2rem;
                cursor: default
            }

.order-overview {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    background: rgb(202,79,136);
    background: linear-gradient(-13deg, rgba(242,102,130,1) 0%, rgba(202,79,136,1) 100%);
    color: #fff
}

    .order-overview h4 {
        flex-shrink: 0
    }

    .order-overview > .order-overview-content > div:first-child {
        border-bottom: 1px solid #ffffff77
    }

    .order-overview > .order-overview-content > div > div {
        height: 100%;
        width: 33.33%;
        border-left: 1px solid #ffffff77;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .order-overview > .order-overview-content > div > div span {
            flex-shrink: 0;
            font-size: 0.9rem;
        }

            .order-overview > .order-overview-content > div > div span:last-child {
                font-size: 2rem;
                font-weight: bold;
            }

        .order-overview > .order-overview-content > div > div.cost {
            width: 66.66%;
        }

        .order-overview > .order-overview-content > div > div:last-child {
            border-left: none
        }

    .order-overview > .order-overview-content .card-date {
        margin-top: -25px;
    }

    .order-overview > .order-overview-content .cost >span {
        width: 70%;
        font-size: 2rem !important;
        color: #fff;
        text-align:left;
        padding: 0 5px;
    }
    .order-overview > .order-overview-content .cost .toman {
        text-align:right;
        width: 30%;
        font-size: 1rem !important;
        color: #fff
    }


/*

.common-style-chart {
    border-radius: 10px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #bbb;
}*/
.common-style-chart {
}

    .common-style-chart h2 {
        font-size: 1.2rem;
        color: #333;
        font-weight: bold;
        padding:15px 20px;
            border-bottom:1px solid #ddd 
    }

    span , h4 , h5 , div{
        cursor:default
    }
    button , button * , a , a *{
        cursor: pointer
    }
.mud-chip-content{
    cursor: pointer
}